<template>
  <div v-loading="loading" style="padding: 10px">
    <el-form ref="form" :model="form" label-width="90px" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input style="width: 300px" v-model="form.username" placeholder="不少于6位数的用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input style="width: 300px" v-model="form.password" placeholder="不少于6位数的密码"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input style="width: 300px" v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select style="width: 200px" v-model="form.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 300px" label="联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="入职部门" prop="department" :required="departmentList?false:true">
        <el-checkbox-group v-model="departmentList">
          <el-checkbox label="客服部" border></el-checkbox>
          <el-checkbox label="运营部" border></el-checkbox>
          <el-checkbox label="宣传部" border></el-checkbox>
          <el-checkbox label="策划部" border></el-checkbox>
          <el-checkbox label="人事部" border></el-checkbox>
          <el-checkbox label="监管部" border></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="员工头像" required>
        <el-upload
          class="upload-demo"
          drag
          accept=".png,.jpg"
          :headers="header"
          :action="uploadAction"
          :on-success="handleUploadSuccess"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50mb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="员工头像" prop="url" v-show="false" :required="url?false:true">
        <el-input v-model="this.url"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button type="danger" @click="resetForm()" plain>清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {CreateWorker} from "@/api/worker";
  import config from "@/config";

  export default {
    inject:['reload'],
    data() {
      const isEmpty = (rule, value, callback) => {
        if (value == '') {
          callback(new Error(rule.message))
        } else {
          callback()
        }
      };
      return {
        rules: {
          username: [
            { required: true, message: '用户名不能为空！', trigger: 'blur' },
            { required: true, min:6, message: '请输入不少于六位数的用户名！', trigger: 'blur' },
          ],
          password: [
            { required: true,message: '密码不能为空！', trigger: 'blur' },
            { required: true, min:6, message: '请输入不少于六位数的密码！', trigger: 'blur' },
          ],
          gender: [
            { required: true, message: '性别不能为空！', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '联系电话不能为空！', trigger: 'blur' },
            {
              validator: function(rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号格式错误"));
                } else {
                  callback();
                }
              },
              trigger: "change"
            }
          ],
          department: [
            {  validator: isEmpty, required: true, message: '入职部门不能为空！', trigger: 'blur' }
          ],
          url: [
            { validator: isEmpty, message: '请上传电影封面！', trigger: ['blur','change'] }
          ],

        },
        header: {
          "Authorization": localStorage.getItem("token")
        },
        uploadAction: config.API_URL + '/upload',
        url: '',
        loading: false,
        form: {
          username: '',
          nickname: '',
          password: '',
          gender: '',
          avatar: '',
          phone: '',
          department: '',
        },
        departmentList: [],
      }
    },
    methods: {

      onSubmit() {
        this.form.department = this.departmentList.toString()
        console.log(this.form.department)
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true;
            CreateWorker(this.form).then(res => {
              if (res.success){
                setTimeout(() => {
                  this.$message({
                    message: '成功消息：添加员工成功',
                    type: 'success'
                  });
                  this.$router.push("/worker/list")
                  this.loading = false
                }, 200)
              } else {
                this.loading = false
                this.resetForm();
              }
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });

      },

      handleUploadSuccess(res) {
        this.form.avatar = res;
        this.url = res;
      },

      resetForm() {
        this.reload()
      },

    }
  }
</script>

<style scoped>

</style>
